
<template>
  <view class="container">
    <!-- 主要内容区域 -->
    <scroll-view class="main-content" scroll-y>
      <!-- 每日打卡页面 -->
      <view v-if="currentTab === 0" class="daily-checkin">
        <!-- 顶部日期区域 -->
        <view class="date-header">
          <view class="date-selector">
            <text class="date-text">{{ formatDate(currentDate) }}</text>
          </view>
        </view>

        <!-- 健康评分卡片 -->
        <view class="health-score-card">
          <view class="score-content">
            <view class="score-circle">
              <view class="score-number">{{ healthScore }}</view>
              <text class="score-label">健康评分</text>
            </view>
            <view class="score-details">
              <view class="score-item">
                <text class="score-value">{{ todayData.steps }}</text>
                <text class="score-desc">步数</text>
              </view>
              <view class="score-item">
                <text class="score-value">{{ todayData.calories }}</text>
                <text class="score-desc">卡路里</text>
              </view>
              <view class="score-item">
                <text class="score-value">{{ todayData.sleep }}h</text>
                <text class="score-desc">睡眠</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 打卡模块区域 -->
        <view class="checkin-modules">
          <!-- 运动记录卡片 -->
          <view class="module-card sport-card" @click="openModal('sport')">
            <view class="card-header">
              <view class="card-title">
                <uni-icons type="person-filled" size="20" color="#36D1DC"></uni-icons>
                <text>运动记录</text>
              </view>
              <uni-icons type="plus" size="18" color="#666" class="cursor-pointer"></uni-icons>
            </view>
            <view class="card-content">
              <view class="data-row">
                <view class="data-item">
                  <text class="data-value">{{ todayData.steps }}</text>
                  <text class="data-label">步数</text>
                </view>
                <view class="data-item">
                  <text class="data-value">{{ todayData.duration }}min</text>
                  <text class="data-label">运动时长</text>
                </view>
                <view class="data-item">
                  <text class="data-value">{{ todayData.calories }}</text>
                  <text class="data-label">消耗卡路里</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 饮食追踪卡片 -->
          <view class="module-card diet-card" @click="openModal('diet')">
            <view class="card-header">
              <view class="card-title">
                <uni-icons type="gift-filled" size="20" color="#FF9A9E"></uni-icons>
                <text>饮食追踪</text>
              </view>
              <uni-icons type="plus" size="18" color="#666" class="cursor-pointer"></uni-icons>
            </view>
            <view class="card-content">
              <view class="meal-row">
                <view class="meal-item">
                  <text class="meal-label">早餐</text>
                  <text class="meal-status">{{ todayData.breakfast ? '已记录' : '未记录' }}</text>
                </view>
                <view class="meal-item">
                  <text class="meal-label">午餐</text>
                  <text class="meal-status">{{ todayData.lunch ? '已记录' : '未记录' }}</text>
                </view>
                <view class="meal-item">
                  <text class="meal-label">晚餐</text>
                  <text class="meal-status">{{ todayData.dinner ? '已记录' : '未记录' }}</text>
                </view>
              </view>
              <view class="water-intake">
                <text class="water-label">水分摄入</text>
                <text class="water-value">{{ todayData.water }}ml</text>
              </view>
            </view>
          </view>

          <!-- 体重监测卡片 -->
          <view class="module-card weight-card" @click="openModal('weight')">
            <view class="card-header">
              <view class="card-title">
                <uni-icons type="heart-filled" size="20" color="#5B86E5"></uni-icons>
                <text>体重监测</text>
              </view>
              <uni-icons type="plus" size="18" color="#666" class="cursor-pointer"></uni-icons>
            </view>
            <view class="card-content">
              <view class="weight-row">
                <view class="weight-item">
                  <text class="weight-value">{{ todayData.weight }}kg</text>
                  <text class="weight-label">当前体重</text>
                </view>
                <view class="weight-item">
                  <text class="weight-value">{{ todayData.bmi }}</text>
                  <text class="weight-label">BMI指数</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 睡眠分析卡片 -->
          <view class="module-card sleep-card" @click="openModal('sleep')">
            <view class="card-header">
              <view class="card-title">
                <uni-icons type="star-filled" size="20" color="#FAD0C4"></uni-icons>
                <text>睡眠分析</text>
              </view>
              <uni-icons type="plus" size="18" color="#666" class="cursor-pointer"></uni-icons>
            </view>
            <view class="card-content">
              <view class="sleep-row">
                <view class="sleep-item">
                  <text class="sleep-value">{{ todayData.sleep }}h</text>
                  <text class="sleep-label">睡眠时长</text>
                </view>
                <view class="sleep-item">
                  <text class="sleep-value">{{ todayData.sleepQuality }}</text>
                  <text class="sleep-label">睡眠质量</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 历史记录页面 -->
      <view v-if="currentTab === 1" class="history-page">
        <view class="history-header">
          <text class="page-title">历史记录</text>
          <view class="time-selector">
          
          </view>
        </view>
        <view class="data-categories">
          <view class="category-item" v-for="category in categoriesList" :key="category.id" @click="toggleCategory(category.id)">
            <view class="category-header">
              <view class="category-title">
                <uni-icons :type="category.icon" size="20" :color="category.color"></uni-icons>
                <text>{{ category.name }}</text>
              </view>
              <uni-icons :type="category.expanded ? 'up' : 'down'" size="16" color="#666"></uni-icons>
            </view>
            <view v-if="category.expanded" class="category-content">
              <view class="history-item" v-for="item in category.data" :key="item.date">
                <text class="history-date">{{ item.date }}</text>
                <text class="history-value">{{ item.value }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 我的页面 -->
      <view v-if="currentTab === 2" class="profile-page">
        <view class="profile-header">
          <view class="avatar-section">
            <image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
            <text class="username">健康达人</text>
          </view>
          <view class="health-goal">
            <text class="goal-title">我的健康目标</text>
            <text class="goal-desc">每日步数 {{ stepGoal }} 步</text>
          </view>
        </view>

        <view class="settings-section">
          <view class="setting-item" @click="openStepGoalModal">
            <view class="setting-left">
              <uni-icons type="sound" size="20" color="#36D1DC"></uni-icons>
              <text>步数设置</text>
            </view>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
          <view class="setting-item" @click="goToPrivacyPolicy">
            <view class="setting-left">
              <uni-icons type="info" size="20" color="#FAD0C4"></uni-icons>
              <text>隐私政策</text>
            </view>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item" :class="{ active: currentTab === 0 }" @click="currentTab = 0">
        <uni-icons type="home" size="24" :color="currentTab === 0 ? '#36D1DC' : '#999'"></uni-icons>
        <text :class="{ active: currentTab === 0 }">每日打卡</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 1 }" @click="currentTab = 1">
        <uni-icons type="bars" size="24" :color="currentTab === 1 ? '#36D1DC' : '#999'"></uni-icons>
        <text :class="{ active: currentTab === 1 }">历史记录</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 2 }" @click="currentTab = 2">
        <uni-icons type="person" size="24" :color="currentTab === 2 ? '#36D1DC' : '#999'"></uni-icons>
        <text :class="{ active: currentTab === 2 }">我的</text>
      </view>
    </view>

    <!-- 数据输入弹窗 -->
    <uni-popup ref="dataModal" type="bottom" background-color="#fff">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">{{ modalTitle }}</text>
          <uni-icons type="close" size="20" color="#666" @click="closeModal" class="cursor-pointer"></uni-icons>
        </view>
        <view class="modal-body">
          <!-- 运动记录输入 -->
          <view v-if="modalType === 'sport'" class="input-section">
            <view class="input-group">
              <text class="input-label">步数</text>
              <input class="input-field" type="number" v-model="inputData.steps" placeholder="请输入步数" />
            </view>
            <view class="input-group">
              <text class="input-label">运动时长（分钟）</text>
              <input class="input-field" type="number" v-model="inputData.duration" placeholder="请输入运动时长" />
            </view>
            <view class="input-group">
              <text class="input-label">消耗卡路里</text>
              <input class="input-field" type="number" v-model="inputData.calories" placeholder="请输入消耗卡路里" />
            </view>
          </view>

          <!-- 饮食追踪输入 -->
          <view v-if="modalType === 'diet'" class="input-section">
            <view class="meal-checkboxes">
              <view class="checkbox-item" @click="toggleMeal('breakfast')">
                <uni-icons :type="inputData.breakfast ? 'checkbox-filled' : 'checkbox'" size="20" color="#36D1DC"></uni-icons>
                <text>早餐</text>
              </view>
              <view class="checkbox-item" @click="toggleMeal('lunch')">
                <uni-icons :type="inputData.lunch ? 'checkbox-filled' : 'checkbox'" size="20" color="#36D1DC"></uni-icons>
                <text>午餐</text>
              </view>
              <view class="checkbox-item" @click="toggleMeal('dinner')">
                <uni-icons :type="inputData.dinner ? 'checkbox-filled' : 'checkbox'" size="20" color="#36D1DC"></uni-icons>
                <text>晚餐</text>
              </view>
            </view>
            <view class="input-group">
              <text class="input-label">水分摄入（ml）</text>
              <input class="input-field" type="number" v-model="inputData.water" placeholder="请输入水分摄入量" />
            </view>
          </view>

          <!-- 体重监测输入 -->
          <view v-if="modalType === 'weight'" class="input-section">
            <view class="input-group">
              <text class="input-label">体重（kg）</text>
              <input class="input-field" type="number" v-model="inputData.weight" placeholder="请输入体重" />
            </view>
            <view class="input-group">
              <text class="input-label">身高（cm）</text>
              <input class="input-field" type="number" v-model="inputData.height" placeholder="请输入身高" />
            </view>
          </view>

          <!-- 睡眠分析输入 -->
          <view v-if="modalType === 'sleep'" class="input-section">
            <view class="input-group">
              <text class="input-label">睡眠时长（小时）</text>
              <input class="input-field" type="number" v-model="inputData.sleep" placeholder="请输入睡眠时长" />
            </view>
            <view class="input-group">
              <text class="input-label">睡眠质量</text>
              <picker :value="sleepQualityIndex" :range="sleepQualityOptions" @change="onSleepQualityChange">
                <view class="picker-view">
                  <text>{{ sleepQualityOptions[sleepQualityIndex] }}</text>
                  <uni-icons type="down" size="16" color="#666"></uni-icons>
                </view>
              </picker>
            </view>
          </view>
        </view>
        <view class="modal-footer">
          <button class="cancel-btn" @click="closeModal">取消</button>
          <button class="confirm-btn" @click="saveData">保存</button>
        </view>
      </view>
    </uni-popup>

    <!-- 步数目标设置弹窗 -->
    <uni-popup ref="stepGoalModal" type="bottom" @close="closeStepGoalModal">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">设置每日步数目标</text>
          <uni-icons type="close" size="20" color="#666" @click="closeStepGoalModal" class="cursor-pointer"></uni-icons>
        </view>
        <view class="modal-body">
          <view class="input-group">
            <text class="input-label">每日步数目标</text>
            <input class="input-field" type="number" v-model="stepGoalInput" placeholder="请输入步数目标" />
          </view>
        </view>
        <view class="modal-footer">
          <button class="cancel-btn" @click="closeStepGoalModal">取消</button>
          <button class="confirm-btn" @click="saveStepGoal">保存</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      currentDate: new Date(),
      timeRange: 'week',
      dataModal: null,
      modalType: '',
      modalTitle: '',
      inputData: {
        steps: '',
        duration: '',
        calories: '',
        breakfast: false,
        lunch: false,
        dinner: false,
        water: '',
        weight: '',
        height: '',
        sleep: '',
        sleepQuality: '良好'
      },
      sleepQualityOptions: ['很差', '较差', '一般', '良好', '很好'],
      sleepQualityIndex: 3,
      todayData: {
        steps: 8520,
        duration: 45,
        calories: 320,
        breakfast: true,
        lunch: true,
        dinner: false,
        water: 1200,
        weight: 65.5,
        bmi: 22.1,
        sleep: 7.5,
        sleepQuality: '良好'
      },
      avatarUrl: 'https://readdy.ai/api/search-image?query=icon%2C%203D%20cartoon%20avatar%2C%20friendly%20person%20with%20smile%2C%20vibrant%20colors%20with%20soft%20gradients%2C%20minimalist%20design%2C%20smooth%20rounded%20shapes%2C%20subtle%20shading%2C%20no%20outlines%2C%20centered%20composition%2C%20playful%20and%20friendly%20aesthetic%2C%20isometric%20perspective%2C%20high%20detail%20quality%2C%20clean%20and%20modern%20look%2C%20single%20object%20focus&width=120&height=120&seq=avatar001&orientation=squarish',
      healthHistory: {}, // 新增
      expandedCategories: [], // 控制展开收起
      totalDays: 28,
      avgScore: 85,
      totalSteps: 245600,
      stepGoal: 10000, // 新增：每日步数目标
      showStepGoalModal: false, // 控制弹窗显示
      stepGoalInput: '', // 弹窗输入值
    }
  },
  computed: {
    healthScore() {
      let score = 0
      // 步数评分 (30%)
      if (this.todayData.steps >= 10000) score += 30
      else score += (this.todayData.steps / 10000) * 30
      // 运动时长评分 (25%)
      if (this.todayData.duration >= 60) score += 25
      else score += (this.todayData.duration / 60) * 25
      // 饮食评分 (25%)
      const mealCount = [this.todayData.breakfast, this.todayData.lunch, this.todayData.dinner].filter(Boolean).length
      score += (mealCount / 3) * 25
      // 睡眠评分 (20%)
      if (this.todayData.sleep >= 7 && this.todayData.sleep <= 9) score += 20
      else if (this.todayData.sleep >= 6 && this.todayData.sleep <= 10) score += 15
      else score += 10
      return Math.round(score)
    },
    categoriesList() {
      // healthHistory: { '2024-06-10': {steps, ...}, ... }
      const historyArr = Object.entries(this.healthHistory)
        .sort((a, b) => b[0].localeCompare(a[0])) // 日期倒序
        .map(([date, data]) => ({ date, ...data }))
      return [
        {
          id: 1,
          name: '运动数据',
          icon: 'person-filled',
          color: '#36D1DC',
          expanded: this.expandedCategories.includes(1),
          data: historyArr.map(item => ({
            date: item.date,
            value: `${item.steps || 0}步 / ${item.duration || 0}分钟 / ${item.calories || 0}卡路里`
          }))
        },
        {
          id: 2,
          name: '饮食记录',
          icon: 'gift-filled',
          color: '#FF9A9E',
          expanded: this.expandedCategories.includes(2),
          data: historyArr.map(item => ({
            date: item.date,
            value: `早餐${item.breakfast ? '✓' : '✗'} 午餐${item.lunch ? '✓' : '✗'} 晚餐${item.dinner ? '✓' : '✗'} / ${item.water || 0}ml水`
          }))
        },
        {
          id: 3,
          name: '体重记录',
          icon: 'heart-filled',
          color: '#5B86E5',
          expanded: this.expandedCategories.includes(3),
          data: historyArr.map(item => ({
            date: item.date,
            value: `${item.weight || 0}kg / BMI ${item.bmi || 0}`
          }))
        },
        {
          id: 4,
          name: '睡眠记录',
          icon: 'star-filled',
          color: '#FAD0C4',
          expanded: this.expandedCategories.includes(4),
          data: historyArr.map(item => ({
            date: item.date,
            value: `${item.sleep || 0}小时 / ${item.sleepQuality || ''}`
          }))
        }
      ]
    }
  },
  methods: {
    formatDate(date) {
      const month = date.getMonth() + 1
      const day = date.getDate()
      const weekDays = ['日', '一', '二', '三', '四', '五', '六']
      const weekDay = weekDays[date.getDay()]
      return `${month}月${day}日 星期${weekDay}`
    },
    formatDateKey(date) {
      // 返回 '2024-06-11' 这种格式
      const y = date.getFullYear();
      const m = (date.getMonth() + 1).toString().padStart(2, '0');
      const d = date.getDate().toString().padStart(2, '0');
      return `${y}-${m}-${d}`;
    },
    changeDate(delta) {
      const newDate = new Date(this.currentDate)
      newDate.setDate(newDate.getDate() + delta)
      this.currentDate = newDate
    },
    openModal(type) {
      this.modalType = type
      const titles = {
        sport: '运动记录',
        diet: '饮食追踪',
        weight: '体重监测',
        sleep: '睡眠分析'
      }
      this.modalTitle = titles[type] || ''
      // 重置输入数据
      this.inputData = {
        steps: this.todayData.steps.toString(),
        duration: this.todayData.duration.toString(),
        calories: this.todayData.calories.toString(),
        breakfast: this.todayData.breakfast,
        lunch: this.todayData.lunch,
        dinner: this.todayData.dinner,
        water: this.todayData.water.toString(),
        weight: this.todayData.weight.toString(),
        height: '170',
        sleep: this.todayData.sleep.toString(),
        sleepQuality: this.todayData.sleepQuality
      }
      this.$nextTick(() => {
        this.$refs.dataModal.open()
      })
    },
    closeModal() {
      if (this.$refs.dataModal && typeof this.$refs.dataModal.close === 'function') {
        this.$refs.dataModal.close()
      }
    },
    toggleMeal(meal) {
      this.inputData[meal] = !this.inputData[meal]
    },
    onSleepQualityChange(e) {
      this.sleepQualityIndex = e.detail.value
      this.inputData.sleepQuality = this.sleepQualityOptions[e.detail.value]
    },
    saveData() {
      if (this.modalType === 'sport') {
        this.todayData.steps = parseInt(this.inputData.steps) || 0
        this.todayData.duration = parseInt(this.inputData.duration) || 0
        this.todayData.calories = parseInt(this.inputData.calories) || 0
      } else if (this.modalType === 'diet') {
        this.todayData.breakfast = this.inputData.breakfast
        this.todayData.lunch = this.inputData.lunch
        this.todayData.dinner = this.inputData.dinner
        this.todayData.water = parseInt(this.inputData.water) || 0
      } else if (this.modalType === 'weight') {
        this.todayData.weight = parseFloat(this.inputData.weight) || 0
        const height = parseFloat(this.inputData.height) || 170
        this.todayData.bmi = parseFloat((this.todayData.weight / Math.pow(height / 100, 2)).toFixed(1))
      } else if (this.modalType === 'sleep') {
        this.todayData.sleep = parseFloat(this.inputData.sleep) || 0
        this.todayData.sleepQuality = this.inputData.sleepQuality
      }
      uni.setStorageSync('healthData', this.todayData)
      // 新增：保存到历史，且只保留最近5天
      const dateKey = this.formatDateKey(this.currentDate)
      let history = uni.getStorageSync('healthHistory') || {}
      history[dateKey] = { ...this.todayData }
      // 保留最近5天
      const sortedKeys = Object.keys(history).sort((a, b) => b.localeCompare(a))
      const limitedKeys = sortedKeys.slice(0, 5)
      const limitedHistory = {}
      limitedKeys.forEach(key => {
        limitedHistory[key] = history[key]
      })
      uni.setStorageSync('healthHistory', limitedHistory)
      this.healthHistory = limitedHistory
      this.closeModal()
      this.showToast('保存成功')
    },
    toggleCategory(id) {
      // 切换展开收起
      if (this.expandedCategories.includes(id)) {
        this.expandedCategories = this.expandedCategories.filter(cid => cid !== id)
      } else {
        this.expandedCategories = [...this.expandedCategories, id]
      }
    },
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'none',
        duration: 2000
      })
    },
    openStepGoalModal() {
      this.stepGoalInput = this.stepGoal.toString()
      this.showStepGoalModal = true
      this.$refs.stepGoalModal.open()
    },
    closeStepGoalModal() {
      this.showStepGoalModal = false
      this.$refs.stepGoalModal.close()
    },
    saveStepGoal() {
      const val = parseInt(this.stepGoalInput)
      if (!val || val < 1000) {
        this.showToast('请输入合理的步数目标')
        return
      }
      this.stepGoal = val
      uni.setStorageSync('stepGoal', val)
      this.showStepGoalModal = false
      this.$refs.stepGoalModal.close()
      this.showToast('保存成功')
    },
    goToPrivacyPolicy() {
      uni.navigateTo({
        url: '/pages/index3'
      })
    }
  },
  mounted() {
    const savedStepGoal = uni.getStorageSync('stepGoal')
    if (savedStepGoal) {
      this.stepGoal = savedStepGoal
    }
    const savedData = uni.getStorageSync('healthData')
    if (savedData) {
      this.todayData = Object.assign({}, this.todayData, savedData)
    }
    // 新增：读取历史
    const savedHistory = uni.getStorageSync('healthHistory')
    if (savedHistory) {
      this.healthHistory = savedHistory
    }
  }
}
</script>

<style>
page {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #F8F9FA;
}

.main-content {
  flex: 1;
  overflow: auto;
  padding-bottom: 160rpx;
}

.cursor-pointer {
  cursor: pointer;
}

/* 每日打卡页面样式 */
.daily-checkin {
  padding: 40rpx 30rpx;
  padding-top: 10rpx;
}

.date-header {
  margin-bottom: 10rpx;
}

.date-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40rpx;
  padding: 20rpx 0;
}

.date-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.health-score-card {
  background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%);
  border-radius: 32rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(54, 209, 220, 0.3);
}

.score-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.score-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-number {
  font-size: 72rpx;
  font-weight: bold;
  color: white;
  line-height: 1;
}

.score-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 8rpx;
}

.score-details {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.score-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.score-value {
  font-size: 28rpx;
  font-weight: 600;
  color: white;
}

.score-desc {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.7);
}

.checkin-modules {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.module-card {
  background: white;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.module-card:active {
  transform: translateY(2rpx);
}

.sport-card {
  background: linear-gradient(135deg, rgba(54, 209, 220, 0.1) 0%, rgba(91, 134, 229, 0.1) 100%);
}

.diet-card {
  background: linear-gradient(135deg, rgba(255, 154, 158, 0.1) 0%, rgba(250, 208, 196, 0.1) 100%);
}

.weight-card {
  background: linear-gradient(135deg, rgba(91, 134, 229, 0.1) 0%, rgba(54, 209, 220, 0.1) 100%);
}

.sleep-card {
  background: linear-gradient(135deg, rgba(250, 208, 196, 0.1) 0%, rgba(255, 154, 158, 0.1) 100%);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.card-title text {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.card-content {
  color: #666;
}

.data-row {
  display: flex;
  justify-content: space-between;
}

.data-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.data-value {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.data-label {
  font-size: 20rpx;
  color: #999;
  margin-top: 8rpx;
}

.meal-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.meal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.meal-label {
  font-size: 24rpx;
  color: #666;
}

.meal-status {
  font-size: 20rpx;
  color: #999;
  margin-top: 8rpx;
}

.water-intake {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
  border-top: 1px solid #f0f0f0;
}

.water-label {
  font-size: 24rpx;
  color: #666;
}

.water-value {
  font-size: 24rpx;
  font-weight: 600;
  color: #333;
}

.weight-row {
  display: flex;
  justify-content: space-around;
}

.weight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.weight-value {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.weight-label {
  font-size: 20rpx;
  color: #999;
  margin-top: 8rpx;
}

.sleep-row {
  display: flex;
  justify-content: space-around;
}

.sleep-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sleep-value {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.sleep-label {
  font-size: 20rpx;
  color: #999;
  margin-top: 8rpx;
}

/* 历史记录页面样式 */
.history-page {
  padding: 40rpx 30rpx;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.time-selector {
  display: flex;
  background: #f5f5f5;
  border-radius: 20rpx;
  padding: 4rpx;
}

.time-tab {
  padding: 12rpx 24rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  color: #666;
  transition: all 0.3s ease;
}

.time-tab.active {
  background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%);
  color: white;
}

.chart-section {
  margin-bottom: 40rpx;
}

.chart-card {
  background: white;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.chart-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;
  gap: 20rpx;
}

.chart-text {
  font-size: 24rpx;
  color: #999;
}

.data-categories {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.category-item {
  background: white;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
}

.category-title {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.category-title text {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.category-content {
  border-top: 1px solid #f0f0f0;
  padding: 0 32rpx;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1px solid #f8f8f8;
}

.history-item:last-child {
  border-bottom: none;
}

.history-date {
  font-size: 24rpx;
  color: #666;
}

.history-value {
  font-size: 24rpx;
  color: #333;
}

/* 我的页面样式 */
.profile-page {
  padding: 40rpx 30rpx;
}

.profile-header {
  background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%);
  border-radius: 32rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(54, 209, 220, 0.3);
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-bottom: 16rpx;
}

.username {
  font-size: 32rpx;
  font-weight: 600;
  color: white;
}

.health-goal {
  text-align: center;
}

.goal-title {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  margin-bottom: 8rpx;
}

.goal-desc {
  font-size: 28rpx;
  color: white;
  font-weight: 500;
}

.data-overview {
  display: flex;
  justify-content: space-around;
  background: white;
  border-radius: 32rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.overview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.overview-value {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.overview-label {
  font-size: 20rpx;
  color: #999;
  margin-top: 8rpx;
}

.settings-section {
  background: white;
  border-radius: 32rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1px solid #f8f8f8;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.setting-left text {
  font-size: 28rpx;
  color: #333;
}

/* 底部导航栏样式 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 20rpx 0 40rpx;
  z-index: 1000;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  transition: all 0.3s ease;
}

.tab-item text {
  font-size: 20rpx;
  color: #999;
}

.tab-item text.active {
  color: #36D1DC;
  font-weight: 600;
}

/* 弹窗样式 */
.modal-content {
  background: white;
  border-radius: 32rpx 32rpx 0 0;
  padding: 40rpx;
  min-height: 600rpx;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f0f0f0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.modal-body {
  margin-bottom: 40rpx;
}

.input-section {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.input-label {
  font-size: 24rpx;
  color: #666;
  font-weight: 500;
}

.input-field {
  padding: 24rpx;
  border: 1px solid #e0e0e0;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #333;
}

.input-field:focus {
  border-color: #36D1DC;
}

.meal-checkboxes {
  display: flex;
  justify-content: space-around;
  margin-bottom: 32rpx;
}

.checkbox-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.checkbox-item text {
  font-size: 24rpx;
  color: #666;
}

.picker-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border: 1px solid #e0e0e0;
  border-radius: 16rpx;
  background: white;
}

.picker-view text {
  font-size: 28rpx;
  color: #333;
}

.modal-footer {
  display: flex;
  gap: 24rpx;
}

.cancel-btn {
  flex: 1;
  padding: 24rpx;
  border: 1px solid #e0e0e0;
  border-radius: 16rpx;
  background: white;
  color: #666;
  font-size: 28rpx;
  margin: 0;
}

.confirm-btn {
  flex: 1;
  padding: 24rpx;
  border: none;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%);
  color: white;
  font-size: 28rpx;
  margin: 0;
}
</style>
